<!-- 增加帖子页面 -->
<template>
	<view id="body">
		<!-- 帖子内容 -->
		<view class="content-input">
			<u--textarea v-model="content" placeholder="分享新鲜事..."  count="true"  maxlength=500 ></u--textarea>
		</view>
		<!-- 添加图片 -->
		<view class="img-input">
			<image :src="item" v-if="item" mode="" class="imglist" v-for="(item,index) in imagesList" :key="item" @tap="ViewImage(index)" @longpress="deleteImg(index)"></image>
			<view class="box"> 
				<text class="t-icon t-icon-Rrl_s_114" style="width: 80rpx; height: 80rpx;margin-top: 36rpx; color: #ffffff;" @click="addImages()"></text>
			</view>
		</view>
		<view class="label-dingwei">
			<!-- 添加标签 -->
			<view class="label" @click="labelclick"> 
				<text v-if="labeltext == '添加标签'" class="t-icon t-icon-biaoqian-copy"></text>
				<text v-if="labeltext != '添加标签'" class="t-icon t-icon-biaoqian"></text>
				<text class="labeltext" v-if="labeltext != '添加标签'" style="color: #3c9cff;">{{labeltext}}</text>
				<text class="labeltext" v-if="labeltext == '添加标签'">{{labeltext}}</text> 
				<view class="arrowhead">
					<text class="t-icon t-icon-youjiantou1"></text>
				</view>
			</view>
			<!-- 定位 -->
			<view class="dingwei" @click="dingweiclick">
				<text v-if="address == '添加位置'" class="t-icon t-icon-dingwei"></text>
				<text v-if="address != '添加位置'" class="t-icon t-icon-dingwei-copy"></text>
				<text class="labeltext" v-if="address == '添加位置'">{{address}}</text>
				<text v-if="address != '添加位置'" style="color: #3c9cff;margin-left: 8rpx;">{{address}}</text>
				<view class="arrowhead1">
					<text class="t-icon t-icon-youjiantou1"></text>
				</view>
			</view>
		</view>
		<!-- 添加标签选择器 -->
		<u-picker :show="show" :columns="columns" @cancel="quxiao" @confirm="queding"></u-picker>
		<!-- 发布按钮 -->
		<view class="fbbutton" @click="fbclick">
			<text class="fabu">发 布</text>
		</view>
		
	</view>
</template>

<script>
	import {http} from "../static/service/requestAddress/rtas.js"
	import {uploadImgToOss,deleteImg} from "../static/service/aliyoss/config.js"
	export default {
		data() {
			return {
				content:"",
				imagesList:[],//获取的本地图片地址数组
				show:false,
				columns: [
                    ['无','生活动态', '咨询求助', '校园活动','好人好事','黑榜','其他']
                ],
				columnsnum:0,//标签类型数字下标
				labeltext:"添加标签",
				labeltb:["t-icon t-icon-biaoqian-copy","t-icon t-icon-biaoqian"],
				address:"添加位置",//定位地址
				receiveImgList:"",//上传的阿里云返回的图片地址
			}
		},
		methods:{
			// 获取图片
			addImages() {
				var urlt 
				if(this.imagesList.length < 8){
					uni.chooseImage({
						count: 9, // 默认最多一次选择8张图
						sourceType: ['album', 'camera'], //图片来源
						success: res => {
							// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
							var tempFilePaths = res.tempFilePaths;
							//支持多图上传
							var falge = false//是否有不合法数据格式标记
							for (var i = 0; i < res.tempFilePaths.length; i++) {
								//对上传的图片校验
								var str = tempFilePaths[i].slice(tempFilePaths[i].length - 3,tempFilePaths[i].length)
								var strhz = ["jpg","png","gif"]
								var T = strhz.indexOf(str)
								if(T == -1){
									falge = true
									continue
								}
								if(this.imagesList.length < 9){
									//显示消息提示框
									uni.showLoading({
										mask: true
									})
									this.imagesList.push(tempFilePaths[i])
								}else{
									uni.$u.toast("图片只能上传9张！")
									break
								}
							}
							setTimeout(function () {
								uni.hideLoading();
								if(falge){
									uni.$u.toast("获取成功，以过滤格式不正确图片！")
								}else{
									uni.$u.toast("图片获取成功！")
								}
							}, 500)
						}
					})
				}else{
					uni.$u.toast("图片最多只能上传9张！")
				}
			},
			//预览图片
			ViewImage(index) {
				uni.previewImage({
					urls: this.imagesList,
					current: index
				});
			},
			//图片长按删除
			deleteImg(index){
				var list = []
				for(var i = 0;i<this.imagesList.length;i++){
					if(index == i){
						continue
					}else{
						list.push(this.imagesList[i])
					}
				}
				this.imagesList = list
			},
			//增加标签
			labelclick(){
				this.show = true
			},
			//增加标签模态框取消事件
			quxiao(){
				this.show = false
			},
			//增加标签模态框确定事件
			queding(e){
				if(e.value[0] == '无'){ 
					this.show = false
					this.labeltext = "添加标签"
					return
				}
				this.labeltext = e.value[0]
				this.show = false
			},
			change(){
				
			},
			//增加定位
			dingweiclick(){
				console.log("点击了增加定位")
				let llat = 0
				let llng = 0
				//获取经纬度
				uni.getLocation({
				    type: "wgs84", //返回可以用于 wx.openLocation 的经纬度
				    success: (res) => {
						llat = res.latitude
						llng = res.longitude
				    }
				});
				//打开地图
				uni.chooseLocation({
					latitude: llat,
					longitude:llng,
					success: (res) => {
						this.address = res.name
						console.log(this.address) 
					}
				})
			},
			//打开模态框
			popupopen(){
				this.pshow = true
			},
			//关闭模态框
			popupclose(){
				this.pshow = false
			},
			//发布按钮
			async fbclick(){
				uni.showLoading({
					title:"动态正在发布中",
					mask: true
				})
				//获取用户信息
				var userdata = uni.getStorageSync('user')
				if(! userdata){
					uni.$u.toast("您还未登录，登录后才能发布动态")
					return
				}
				var user = JSON.parse(userdata)
				//获取标签类型
				for(var i = 0;i < this.columns[0].length;i++){
					if(this.columns[0][i] == this.labeltext){
						this.columnsnum = i
					}
				}
				if(this.columnsnum == 0){
					uni.$u.toast("标签类型不能为空！")
					return
				}
				//上传图片
				var path ="校园论坛"
				this.receiveImgList = await uploadImgToOss(this.imagesList,path)
				//处理帖子首页图片
				var T = this.receiveImgList.split(",")
				var indeximglist = []
				if(T.length > 2){
					var num = 0
					for(var i = 0;i<T.length;i++){
						if(num == 3){
							break
						}
						indeximglist.push(T[i])
						num++
					}
				}else{
					indeximglist = T
				}
				var postdata = {
					id:"",
					type:this.columnsnum,
					content:this.content,
					issueUser:user.id,
					issueUserName:user.name,
					issueUserImg:user.img,
					praisenum:0,
					commentnum:0,
					sharenum:0,
					location:this.address,
					praiseUseridlist:"",//点赞用户集合
					commentidlist:"",//一级评论id集合
					postImglist:this.receiveImgList,
					postIndeximg:JSON.stringify(indeximglist),
					createTime:"",
					updateTime:"",
					overTime:"",
					state:0,
				}
				console.log("请求的数据是："+JSON.stringify(postdata))
				uni.request({
					url: http+"post",
					method:"POST",
					data:postdata,
					complete:(res) =>{
						if(res.data.code == 20011){
							uni.$u.toast("动态发表成功！")
							uni.hideLoading()
							uni.reLaunch({
								url:"/forum/index"
							})
						}else{
							uni.$u.toast("动态发表失败！")
							uni.hideLoading()
						}
					}
				})
			}
		}
	}
</script> 

<style scoped>
	@import url("@/static/css/componentsCss/forum/forumadd.css");
</style>